<!-- 上传图片 -->
<template>
  <div class="upload-img">
    <el-upload :action="apiUrl" :headers="headers" :data="ps" :show-file-list="false" :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload">
      <img v-if="imageUrl" :src="imageUrl" class="avatar" />
      <template v-else>
        <i v-if="!icon" class="el-icon-plus avatar-uploader-icon"></i>
        <span v-else class="c-999">{{ icon }}</span>
      </template>

      <label class="max-del" v-if="imageUrl">
        <i class=" el-icon-zoom-in" title="查看大图" @click.stop="showViewer = true"></i>
        <i class="el-icon-delete" title="删除图片" @click.stop="delImg"></i>
      </label>
    </el-upload>

    <span class="tip-text">{{ tiptext }}</span>
    <el-image-viewer v-if="showViewer" :on-close="() => { showViewer = false }" :url-list="[imageUrl]" />
  </div>
</template>

<script>
import { getToken } from '@/utils/auth';
import * as request from '@/utils/request';

export default {
  name: 'UploadImg',

  components: {
    'el-image-viewer': () => import('element-ui/packages/image/src/image-viewer')
  },
  props: ['imgName', 'url', 'ps', 'tiptext', 'icon', 'src',],
  data() {
    return {
      fileBaseUrl: this.C.fileBaseUrl,
      headers: { "X-Token": getToken() },
      showViewer: false,
      imageUrl: this.src || "",

    }
  },
  watch: {
    src: {
      handler(newVal, oldVal) {
        if (newVal && newVal != this.C.fileBaseUrl &&newVal != this.C.fileBaseUrl+'null' ) {
          console.log(newVal, 'newVal')
          console.log(oldVal, 'oldVal')
          this.imageUrl = newVal;
        }  else {
          this.imageUrl = '';
        }
      },
      immediate: true,
    },

  },
  computed: {
    // 处理请求地址
    apiUrl: function () {
      return `${request.default.defaults.baseURL}${this.url}`;
    }
  },
  methods: {

    handleAvatarSuccess(res, file) {
      if (res.code === 0) {
        return this.U.qerror(res.msg)
      }

      this.imageUrl = URL.createObjectURL(file.raw);

      // 将上传服务器成功后的url传给父级组件
      this.$emit('getImgUrl', { name: this.imgName, url: res.url });
    },
    beforeAvatarUpload(file) {
      // 符合上传的图片格式
      const imgFmts = ['image/jpeg', 'image/gif', 'image/png'];

      // 控制图片类型
      const imgFmt = (imgFmts.indexOf(file.type) !== -1);
      // 最大10M大小图片
      const imgSize = file.size / 1024 / 1024 < 10;

      if (!imgFmt) {
        this.U.qerror('上传图片只能是 JPG/PNG/GIF 格式!');
      }
      if (!imgSize) {
        this.U.qerror('上传图片大小不能超过 10MB!');
      }

      return imgFmt && imgSize;
    },
    delImg() {
      // 请求服务器，将图片删除
      this.imageUrl = '';
      // 将上传服务器成功后的url传给父级组件
      this.$emit('getImgUrl', { name: this.imgName, url: this.imageUrl });
    }
  },
}
</script>

<style lang="less">
.el-image-viewer__wrapper {
  z-index: 99999 !important;
}

.upload-img {
  width: 50px;
  height: 50px;

  >div {
    width: 100%;
    height: 100%;
  }

  .tip-text {
    position: absolute;
    bottom: calc((100% - 32px) / 2);
    left: 50px;
    padding-left: 5px;
  }

  .el-upload {
    position: relative;
    overflow: hidden;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    width: 100%;
    height: 100%;

    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      line-height: 50px;
      text-align: center;
      width: 100%;
      height: 100%;
    }

    .avatar {
      width: 100%;
      height: 100%;
      display: block;
    }

    // 操作按钮
    .max-del {
      position: absolute;
      left: 0px;
      bottom: 0px;
      text-align: center;
      width: 100%;
      display: flex;
      padding: 2px 0px;
      background: #000;
      opacity: 0.6;

      .el-icon-zoom-in {
        flex: 1;
        cursor: pointer;
        color: #fff;
      }

      .el-icon-delete {
        flex: 1;
        cursor: pointer;
        color: #fff;
      }
    }
  }

  .el-upload:hover {
    border-color: #409EFF;
  }

}
</style>
